<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
    <meta name="renderer" content="webkit" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-icon" href="./src/icon.png" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="icon" type="image/png" href="./src/icon.png">
    <link rel="shortcut icon" type="image/png" href="./src/icon.png">
    <link rel="icon" type="image/x-icon" href="./images/favicon.ico">
    <title>光遇身高查询</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="app-container">
        <header class="header">
            <div class="header-content">
                <a href="index.html" class="logo">
                    🍊 橙子小工具
                </a>
                <h1 class="page-title">光遇身高查询</h1>
            </div>
        </header>

        <main class="main-content">

            <section class="query-section">
                <h2 class="form-title">查询信息</h2>
                <div class="input-group">
                    <div class="input-field">
                        <label class="input-label" for="userId">用户ID</label>
                        <input type="text" id="userId" class="text-input" placeholder="请输入用户ID">
                        <button class="help-button" id="userIdHelp">❓</button>
                    </div>
                    <div class="input-field">
                        <label class="input-label" for="longid">光遇账号ID</label>
                        <input type="text" id="longid" class="text-input" placeholder="请输入您的长ID">
                        <button class="help-button" id="accountIdHelp">❓</button>
                    </div>
                </div>

                <div class="server-buttons" id="serverButtons">
                    <button class="server-button active" data-type="cn">国服</button>
                    <button class="server-button" data-type="live">国际服</button>
                    <button class="server-button" data-type="beta">测试服</button>
                </div>

                <div class="action-buttons">
                    <button class="primary-button" id="queryButton">
                        开始查询
                    </button>
                    <button class="secondary-button" id="historyButton" onclick="window.location.href='history.html'">
                        <span class="icon">📋</span>
                        查询历史
                    </button>
                    <button class="secondary-button" id="qqgroup" onclick="window.open('https://qm.qq.com/q/6bX5cgkbL4', '_blank')">
                        <span class="icon">👥</span>
                        加入QQ群
                    </button>
                </div>
            </section>

            <div id="userIdTutorial" class="tutorial-dialog">
                <div class="dialog-content">
                    <button class="dialog-close">✕</button>
                    <img class="tutorial-image" src="https://vip.123pan.cn/1810660/yk6baz03t0n000d7w33gz9mtm84zcssjDIYPDdQzDcxPAdJwDF==.JPG" alt="如何获取用户ID">
                    <p>请找橙子BOT内复制您的用户ID</p>
                </div>
            </div>

            <div id="accountIdTutorial" class="tutorial-dialog">
                <div class="dialog-content">
                    <button class="dialog-close">✕</button>
                    <img class="tutorial-image" src="./live%26beta.png" alt="如何获取光遇账号ID">
                    <p>请在游戏内复制您的光遇账号ID</p>
                </div>
            </div>
            <div class="announcement" id="announcement">
                <!-- 公告内容将通过JavaScript动态加载 -->
            </div>
        </main>
    </div>

    <div class="result-popup" id="resultPopup">
        <div class="result-container">
            <div class="result-header">查询结果</div>
            <div class="result-content"></div>
            <button class="popup-close" onclick="closePopup()">关闭</button>
        </div>
    </div>

    <div class="snackbar" id="snackbar"></div>

    <div id="friendCodeDialog" class="tutorial-dialog">
        <div class="dialog-content">
            <button class="dialog-close">✕</button>
            <h3>请输入好友码</h3>
            <div class="input-field">
                <label class="input-label" for="friendCode">好友码</label>
                <input type="text" id="friendCode" class="text-input" placeholder="请输入好友码">
            </div>
            <button class="primary-button" id="submitFriendCode">确认</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js"></script>
    <script src="js/cos-handler.js"></script>
    <script src="js/app.js"></script>
</body>

</html>